<template>
  <div class="tiptap-editor">
    <div class="editor-menu" v-if="editor">
      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
        Bold
      </button>
      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
        Italic
      </button>
      <button @click="editor.chain().focus().toggleUnderline().run()" :class="{ 'is-active': editor.isActive('underline') }">
        Underline
      </button>
      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
        H1
      </button>
      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
        H2
      </button>
      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
        Bullet List
      </button>
    </div>
    
    <editor-content :editor="editor" class="editor-content" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, watch } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const editor = useEditor({
  content: props.modelValue,
  extensions: [
    StarterKit,
  ],
  onUpdate: () => {
    emit('update:modelValue', editor.value?.getHTML() || '')
  },
})

// 监听modelValue变化
watch(() => props.modelValue, (value) => {
  const isSame = editor.value?.getHTML() === value
  if (!isSame) {
    editor.value?.commands.setContent(value)
  }
})

onMounted(() => {
  // 组件挂载时的逻辑
})

onBeforeUnmount(() => {
  editor.value?.destroy()
})
</script>

<style scoped>
.tiptap-editor {
  /* 移除边框，让编辑区看起来更自然 */
  border: none;
  border-radius: 0;
}

.editor-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.5rem;
  /* 移除底部边框 */
  border-bottom: none;
  background-color: #f8f9fa;
}

.editor-menu button {
  padding: 0.25rem 0.5rem;
  background-color: white;
  /* 移除按钮边框 */
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.875rem;
}

.editor-menu button:hover {
  background-color: #e9ecef;
}

.editor-menu button.is-active {
  background-color: #007bff;
  color: white;
  /* 移除活动按钮边框 */
  border: none;
}

.editor-content {
  min-height: 300px;
}

.editor-content :deep(.ProseMirror) {
  padding: 1rem;
  min-height: 300px;
  outline: none;
}

.editor-content :deep(.ProseMirror:focus) {
  /* 移除聚焦时的轮廓边框 */
  outline: none;
}

.editor-content :deep(p) {
  margin: 0 0 0.5rem 0;
  line-height: 1.5;
}

.editor-content :deep(h1) {
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 1rem 0;
}

.editor-content :deep(h2) {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 1rem 0;
}

.editor-content :deep(strong) {
  font-weight: bold;
}

.editor-content :deep(em) {
  font-style: italic;
}

.editor-content :deep(ul) {
  padding-left: 1.5rem;
  margin: 0 0 1rem 0;
}

.editor-content :deep(li) {
  margin-bottom: 0.25rem;
}
</style>